<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>用户管理</title>
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="/css/style1.css" />

	<link rel="stylesheet" type="text/css"
		  href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/js/bootbox.min.js"></script>
	<style>
		.page {
			font-family: Arial, "楷体";
			font-size: 15px;
			line-height: 26px;
			color: #000000;
			height: 40px;
			margin-top: -15px;
			background-color: #EEF6FF;
			margin-right: 0;
		}

		.page td {
			padding-right: 10px;
			padding-left: 10px;
		}

		.page select {
			font-family: Arial, "楷体";
			font-size: 12px;
			color: #000000;
			line-height: 18px;
			border: 1.5px solid #5084BB;
		}
	</style>
</head>
<body>
<div class="box">
	<!-- 		<div class="title">后台管理用户信息表</div> -->
	<div class="content">
		<!--搜索输入框及查询、重置按钮-->
		<div class="container content_width">
			<div class="person_search">
				<div class="search_input">
					<div class="input-group mb-3">
						<span>用户名：</span> <input id="Ktext" type="text" name="Ktext"
												 class="form-control" placeholder="请输入用户名" value="${param.word}">
					</div>
				</div>
				<div class="search_input">
					<div class="input-group mb-3" hidden>
						<span>密码：</span> <input id="job_num" type="text"
												class="form-control" placeholder="请输入密码">
					</div>
				</div>
				<div class="search_input">

					<button class="btn btn-primary search_btn" type="button"
							id="search_btn" onclick="onSelectByName()">查询</button>

					<button class="btn btn-primary search_btn" type="button"
							id="back_btn">重置</button>
				</div>
			</div>
			<div class="line"></div>
		</div>
		<!--添加按钮及bootstrap的模态框-->
		<div class="export">
			<button id="new_add" type="button" class="btn btn-primary btn-sm"
					data-toggle="modal" data-target="#renyuan">
				<img src="/img/add_two.png" /> <span>添加</span>
			</button>
			<div class="modal fade" id="renyuan">
				<div class="modal-dialog modal-lg modal_position">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">添加</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
						<form id="form1" name="form1" action="UserAdd.do" >
							<div class="modal-body">
								<table id="xztb" class="table" >
									<!--新修改弹窗的样式-->
									<tbody>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>用户名</label></td>
										<td><input class="userName" type="text"
												   name="uname"  placeholder="请输入用户名" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>密码</label></td>
										<td><input class="jobNum" type="text"
												   name="upwd"  placeholder="请输入密码" /></td>

									</tr>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>邮箱</label></td>
										<td><input type="text" name="uemail" placeholder="请输入邮箱" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>文/理科</label></td>
										<td><input type="text" name="ubranch" placeholder="请输入文/理科" /></td>
									</tr>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>成绩</label></td>
										<td><input type="text" name="ugrade" placeholder="请输入成绩" /></td>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>注册日期</label></td>
										<td><input type="text" name="udate" placeholder="注册时间yyyy-MM-dd HH:mm:ss" /></td>
									</tr>
									<tr>
										<td class="tb_bg"><label for=""><font
												style="font-size: 14px; color: red;">*</font>用户权限</label></td>
										<td><input class="jobNum" type="text"
												   name="ulimit"  placeholder="请输入用户权限" /></td>
									</tr>
									</tbody>
								</table>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary"
											data-dismiss="modal">取消</button>
									<button id="ad_btn" type="submit" class="btn btn-secondary" >确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--表格列表-->
		<table id="tb" class="table">
			<thead>
			<tr>
				<th>用户名</th>
				<th>密码</th>
				<th>手机号码</th>
				<th>邮箱</th>
				<th>身份证号码</th>
				<th>注册时间</th>
				<th>登录时间</th>
				<th>余额</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="show_tbody">
			<c:forEach items="${users}" var="o">
				<tr>
					<td>${o.username }</td>
					<td>${o.password }</td>
					<td>${o.phone }</td>
					<td>${o.email }</td>
					<td>${o.idcard }</td>
					<td>${o.pdate }</td>
					<td>${o.lastdate }</td>
					<td>${o.money }</td>
					<td><div class="edit2">

						<span id ="edit1" class="edit1" data-toggle="modal" data-target="#renyuan1" style="color:#479eff;cursor: pointer;" onclick="doUserModify(${o.userid})">编辑</span>
						<div class="modal fade" id="renyuan1">
							<div class="modal-dialog modal-lg modal_position">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title">编辑</h4>
										<button type="button" class="close" data-dismiss="modal">&times;</button>
									</div>	
									<form id="form2" name="form2" action="UserModify2.do" >
										<div class="modal-body">
											<input type="text" name="uid" id="uid" value="${o.userid }" hidden/>
											<table id="xztb" class="table" >
												<tbody>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>用户名</label></td>
													<td><input class="userName" type="text"
															   name="uname" id="uname" /></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>密码</label></td>
													<td><input class="jobNum" type="text"
															   name="upwd" id="upwd"/></td>

												</tr>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>邮箱</label></td>
													<td><input type="text" name="uemail" id="uemail" /></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>文/理科</label></td>
													<td><input type="text" name="ubranch" id="ubranch"/></td>
												</tr>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>成绩</label></td>
													<td><input type="text" name="ugrade" id="ugrade"/></td>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>注册日期</label></td>
													<td><input type="text" name="udate" id="udate"/></td>
												</tr>
												<tr>
													<td class="tb_bg"><label for=""><font
															style="font-size: 14px; color: red;">*</font>用户权限</label></td>
													<td><input class="jobNum" type="text"
															   name="ulimit" id="ulimit"/></td>
												</tr>
												</tbody>
											</table>
											<div class="modal-footer">
												<button type="button" class="btn btn-secondary"
														data-dismiss="modal" style="background: white">取消</button>
												<button id="ad_btn" type="submit" class="btn btn-secondary" >确定</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div><a href="UserDelete.do?uid=${o.userid }" class="del">删除</a>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
		<table width="100%" border="0" align="center" cellpadding="0"
			   cellspacing="0" class="page">
			<tr>
				<td width="50%" align="left">共有&nbsp;${count }&nbsp;条记录，<span
						style="font-family: 楷体; font-size: 15px; color: black">第</span><span
						style="font-family: 楷体; font-size: 15px; color: black">
						${ipageNum }/${total } </span><span
						style="font-family: 楷体; font-size: 15px; color: black;">页</span></td>
				<td width="50%" align="right"><a href="UserSelectByName.do?pageNum=1&word=${param.word}">首页</a>
					<a href="UserSelectByName.do?pageNum=${ipageNum - 1<1?1:ipageNum - 1}&word=${param.word}">上一页</a>
					<a
							href="UserSelectByName.do?pageNum=${ipageNum + 1>total?total:ipageNum + 1}&word=${param.word}">下一页</a>
					<a href="UserSelectByName.do?pageNum=${total }&word=${param.word}">末页&nbsp;</a>&nbsp;跳转到 <select
							name="select2" onchange="changePage(this)">
						<c:forEach begin="1" end="${total }" step="1" var="i">
							<option value="${i }" ${i==ipageNum?"selected":"" }>${i
									}</option>
						</c:forEach>
					</select></td>
			</tr>
		</table>
		<script>
			// 					function toPage(i){

			// 					}
			function changePage(th) {
// 						alert(th.value+"&word=${param.word}");
				window.location="UserSelectByName.do?pageNum="+th.value+"&word=${param.word}";
			}

			function doUserModify(uid) {
// 						alert(uid);
				$.ajax({
					url:"UserModify.do?uid="+uid,
					type : "get",
					dataType : "json",
					success:function (data) {
// 					            	alert(data[0].uname);
// 									alert(data[0].stream);
						$("#uname").val(data[0].uname);
						$("#upwd").val(data[0].upwd);
						$("#uemail").val(data[0].uemail);
						$("#ubranch").val(data[0].ubranch);
						$("#ugrade").val(data[0].ugrade);
						$("#udate").val(data[0].udate);
						$("#ulimit").val(data[0].ulimit);
// 					                window.location.href = "UserSelectByName.do?Ktext="+data[0].uname;
					}
				})
			}
			function onSelectByName() {
				var Ktext = document.getElementById("Ktext").value;
// 							alert(Ktext);
				window.location="UserSelectByName.do?word="+Ktext;
			}
		</script>
	</div>
</div>

<script src="/user/js/mejs1.js"></script>
</body>
</html>
